import styled from 'styled-components'
import cover from '@img/cover.png'
import coverClick from '@img/coverClick.png'
export const Wrap = styled.div`
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: 600px;
	position: relative;
`
export const CardWrap = styled.div`
	display: flex;
	flex-direction: column;
	width: 192px;
	margin-right: 16px;
	margin-bottom: 48px;
	.card-pic {
		width: 192px;
		height: 108px;
		margin-bottom: 4px;
		position: relative;
		background: url(${cover}) no-repeat;
		img {
			width: 192px;
			height: 108px;
		}
		.hover-pic {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			width: 192px;
			height: 108px;
			background: url(${coverClick}) no-repeat;
			cursor: pointer;
		}
		&:hover {
			.hover-pic {
				display: block;
			}
		}
		.card-time {
			position: absolute;
			bottom: 4px;
			right: 4px;
			font-size: 12px;
			color: #fff;
			padding: 0px 4px;
			background: #000000;
			opacity: 0.7;
		}
		.card-ie {
			position: absolute;
			top: 0;
			right: 0;
			font-size: 12px;
			color: #fff;
			padding: 0px 4px;
			background: #000000;
			opacity: 0.7;
		}
	}
	.card-tips {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 4px;
		color: #8b8b8b;
		font-size: 12px;
		.card-download {
			color: #007ac0;
			text-decoration: underline;
			cursor: pointer;
		}
	}
	.card-name {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 14px;
	}
`
